<template>
	<view class="app-pages">
		<!-- 新增 -->
		<view class="invoice-submit">
			<view class="submit1" @click="open">
				<u-icon name="plus-circle" size="30rpx" color="#f74062"></u-icon>
				<text style="margin-left: 10rpx;">新增旅客</text>
			</view>
		</view>

		<u-checkbox-group v-model="value" @change="groupChange">
			<view class="" style="width: 100%;">
				<view class="cell" v-for="(item,index) in listData" :key="index">
					<view class="cell-left">
						<view>
							<u-checkbox activeColor="#f74062" label=" " :disabled="item.disabled"
								:name="JSON.stringify(item)"></u-checkbox>
						</view>
						<view class="" style="margin-left: 16rpx;">
							<view class="user-name">{{item.userName}}</view>
							<view class="user-numb">{{item.userCard}}</view>
						</view>
					</view>
					<view class="cell-right">
						<u-icon name="edit-pen" size="40rpx" color="rgb(144, 147, 153)" @click="handleDetails(item)" />
						<u-icon name="trash" size="40rpx" color="rgb(144, 147, 153)" customStyle="margin-left: 20rpx;" @click="handleDele(item)" />
					</view>
				</view>
			</view>
		</u-checkbox-group>

		<!-- 按钮 -->
		<view class="invoice-submit">
			<view class="submit2" @click="handleSubmit">完 成</view>
			<!-- <view class="delete" @click="handleDele" v-if="value.length">删 除</view> -->
		</view>
		<!-- 表单 -->
		<u-popup :show="show" mode="center">
			<view class="popup">
				<u-cell :border="true">
					<view class="" slot="title">{{form.id?'修改旅客':'新增旅客'}}</view>
					<view class="" slot="value">
						<u-icon @click="cancel" name="close-circle" size="30rpx" color="rgb(144, 147, 153)"></u-icon>
					</view>
				</u-cell>
				<view class="popup-form">
					<u--form :model="form" ref="uForm" labelWidth="200rpx" labelAlign="right">
						<u-form-item label="姓名:" prop="userName">
							<u-input v-model="form.userName" :customStyle="{width:'400rpx'}" placeholder="请输入姓名" />
						</u-form-item>

						<u-form-item label="身份证号码:" prop="userCard">
							<u-input v-model="form.userCard" maxlength="18" type="text" placeholder="请输入身份证号码"
								:customStyle="{width:'400rpx'}" />
						</u-form-item>

						<u-form-item label="手机号码:" prop="userPhone">
							<u-input v-model.number="form.userPhone" maxlength="11" type="number" placeholder="请输入手机号码"
								:customStyle="{width:'400rpx'}" />
						</u-form-item>
					</u--form>
				</view>
				<view class="popup-btn">
					<view class="cancel" @click="cancel">取消</view>
					<view class="submit" @click="submit">确定</view>
				</view>
			</view>
		</u-popup>
		<u-modal :show="show2" title="提示" content="当前要删除所选的内容,请确认" ref="uModal" showCancelButton showConfirmButton
			confirmColor="#f74062" @cancel="show2 = false" @confirm="handleConfirm" :asyncClose="true"></u-modal>
	</view>
</template>

<script>
	import {
		guestList,
		guestAdd,
		guestDel,
		guestEdit,
		parametersList
	} from "@/http";
	import {
		GetAge
	} from "@/utils/pay.js";
	export default {
		data() {
			return {
				value: [],
				valueLength: 1,
				dictValue: 0,
				show: false,
				show2: false,
				listData: [],
				parametersData: {},
				options:{},
				voteNumb:0,
				form: {
					userName: '',
					userCard: '',
					userPhone: ''
				},
				formRules: {
					userName: {
						required: true,
						message: '请输入用户姓名',
						trigger: 'blur'
					},
					userCard: {
						required: true,
						message: '请输入身份证号码',
						trigger: 'blur',
						validator: (rule, value, callback) => {
							let reg = /(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
							if (!reg.test(value)) return callback(new Error('身份证格式不正确'));
							return callback();
						}
					},
					userPhone: {
						required: true,
						message: '请输入手机号码',
						trigger: 'blur',
						validator: (rule, value, callback) => {
							let reg = /^1[3456789]\d{9}$/;
							if (!reg.test(value)) return callback(new Error('手机格式不正确'))
							return callback();
						}
					}
				},
			}
		},
		async onLoad(options) {
			await this.getList();
			if (options && options.ids) { //回显
				let ids = options.ids.split(',');
				ids = ids.map(item => {
					for (let i in this.listData) {
						if (item == this.listData[i].id) return JSON.stringify(this.listData[i])
					}
				});
				this.value = ids;
			}
			if (options && options.dictValue) {
				uni.showLoading({
					title: '正在加载...'
				})
				this.dictValue = options.dictValue;
				let res = await parametersList(options.dictValue);
				this.parametersData = res.data.rows[0];
				this.valueLength = Number(this.parametersData.totalNumber) * options.voteNumb; //设置的人 乘 票数
				this.voteNumb = options.voteNumb;
				uni.hideLoading();
			}
		},
		onReady() {
			this.$nextTick(() => {
				this.$refs['uForm'].setRules(this.formRules);
			})
		},
		methods: {
			handleDele(item) { //删除
				this.show2 = true;
				this.options = item;
			},
			handleSubmit() {
				let data = this.value.map(item => JSON.parse(item));
				// 校验区

				if (this.dictValue == '00001231_00002880' || this.dictValue ==
					'00001231_00016361') { //亲子1=1 亲子2+1 校验其中必须有一张儿童票
					let f1 = 0, //儿童人 
						f2 = 0, //成年人
						f3 = 0, //老年人
						_f1 = Number(this.parametersData.childNumber || 0) * this.voteNumb,
						_f2 = (Number(this.parametersData.totalNumber || 0) - Number(this.parametersData.childNumber || 0) - Number(this.parametersData.elderNumber || 0)) * this.voteNumb,
						_f3 = Number(this.parametersData.elderNumber || 0) * this.voteNumb,
						title = '';

					// parametersData
					for (let i in data) {
						if (GetAge(data[i].userCard) <= 16) { //小于等于16周岁算儿童
							f1 = f1 + 1;
						}
						if (GetAge(data[i].userCard) > 16) { //成年人
							f2 = f2 + 1;
						}
						if (GetAge(data[i].userCard) >= 60) { //老年人
							f3 = f3 + 1;
						}
						console.log('年龄',GetAge(data[i].userCard),data[i].userCard)
					};

					if (_f1 > 0) {
						title = `${title}${_f1}个儿童游客`
					}

					if (_f2 > 0) {
						title = `${title}${_f2}个成人游客`
					}

					if (_f3 > 0) {
						title = `${title}${_f3}个老年游客`
					}
					
					if (_f1 != f1 || (f1+f2) != (_f1+_f2+_f3)) {
						return uni.showToast({
							title: `请选择${title}`,
							icon: "none"
						})
					}
				};

				for (let i in data) { 
					if (this.dictValue == '00001231_00009223' || this.dictValue == '00001231_00015823') { //成人票校验
						// 是人 都能预约成人票
					}
					
					if (this.dictValue == '00001231_00005841' || this.dictValue == '00001231_00015824') { //儿童票校验
						if (!(GetAge(data[i].userCard) <= 16)) {
							return uni.showToast({
								title: "请选择儿童游客",
								icon: "none"
							})
						}
					}

					if (this.dictValue == '00001231_00005840') { //老年票校验
						if (!(GetAge(data[i].userCard) >= 60)) {
							return uni.showToast({
								title: "请选择老年游客",
								icon: "none"
							})
						}
					};
				};
				
				if (this.valueLength != data.length) {
					return uni.showToast({
						title: `请选择${this.valueLength - data.length}个游客`,
						icon: "none"
					})
				}
				
				if (this.valueLength == 1) {
					data = data[0];
				};
				uni.setStorageSync('people_data', data);
				uni.navigateBack();
			},
			groupChange(options) {
				let listData = this.listData.map(item => {
					item.disabled = false;
					return item;
				});
				if (options.length >= this.valueLength) { //禁止
					listData = listData.map(item => {
						item.disabled = true;
						for (let i = 0; i < this.valueLength; i++) {
							if (JSON.parse(options[i]).id == item.id) {
								item.disabled = false;
							}
						};
						return item;
					});
				};
				this.listData = listData;
			},
			handleDetails(options) {
				Object.keys(this.form).forEach(item => {
					this.form[item] = options[item]
				});
				this.form.id = options.id;
				this.show = true;
			},
			async handleConfirm() {
				try {
					let res = await guestDel(this.options.id);
					console.log('删除成功', res);
					await this.getList();
					this.show2 = false;
					this.value = "";
				} catch (err) {
					this.show2 = false;
				}
			},
			open() {
				this.form = {
					userName: '',
					userCard: '',
					userPhone: ''
				}
				this.$refs['uForm'].clearValidate();
				this.form.userPhone = uni.getStorageSync('phone');
				this.show = true
			},
			cancel() {
				this.show = false
			},
			async getList() {
				let res = await guestList();
				this.listData = res.data.rows.map(item => {
					item.disabled = false;
					return item;
				});
				this.value = [];
				return;
			},
			submit() {
				this.$refs['uForm'].validate().then(async res => {
					try {
						if (this.form.id) res = await guestEdit(this.form);
						if (!this.form.id) res = await guestAdd(this.form);
						this.show = false;
						this.getList();
					} catch (err) {
						console.log(err)
					}

				})
			}
		}
	}
</script>
<style lang="scss" scoped>
	::v-deep .u-radio__text {
		display: none !important;
	}

	::v-deep .u-safe-bottom {
		display: none !important;
	}

	::v-deep .u-radio__icon-wrap {
		margin-right: 0 !important;
	}

	.app-pages {
		padding-bottom: 200rpx;
	}

	.popup {
		width: 700rpx;

		.popup-form {
			padding: 40rpx 0;
		}

		.popup-btn {
			display: flex;
			border-top: 2rpx solid #F2F2F2;

			.cancel,
			.submit {
				flex: 1;
				height: 80rpx;
				line-height: 80rpx;
				text-align: center;
			}

			.submit {
				color: #f74062;
				border-left: 2rpx solid #F2F2F2;
			}
		}
	}

	.invoice-submit {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		font-size: 30rpx;
		margin-top: 50rpx;

		.submit1 {
			background-color: #ffffff;
			border-radius: 20rpx;
			width: 500rpx;
			height: 80rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			text-align: center;
			color: #f74062;
			border: 2rpx solid #f74062;
		}

		.submit2 {
			border-radius: 20rpx;
			width: 100%;
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
			color: #FFFFFF;
			background-color: #f74062;
		}

		.delete {
			border-radius: 20rpx;
			width: 100%;
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
			color: #FFFFFF;
			background-color: #cccccc;
			margin-top: 30rpx;
		}
	}


	.cell {
		margin-top: 30rpx;
		box-shadow: 0 0 4rpx #ccc;
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		box-sizing: border-box;
		padding: 20rpx;

		.cell-left {
			display: flex;
			align-items: center;
			justify-content: center;
			padding-right: 30rpx;

			.user-numb {
				margin-top: 15rpx;
			}
		}
		.cell-right{
			display: flex;
		}
	}
</style>
